<template>
	<div style="height:28px;">

		<el-col :span="10">
			<el-form-item>
				<el-input v-model="allvalue1" size="mini" class="dateinp datebeigin" placeholder="请选择开始时间"></el-input>
				<el-time-picker :clearable=false value-format="HH:mm:ss"  ref="starttime" @change="ch_starttime" v-model="value2" 
					class="dateinps datebeigin" size="mini">
				</el-time-picker>
				<el-date-picker :clearable=false @change="startdata" v-model="value1" type="date" class="dateinps fixtime datebeigin" value-format="yyyy-MM-dd" size="mini">
				</el-date-picker>
			</el-form-item>
		</el-col>
		<el-col class="line" :span="3">到</el-col>
		<el-col :span="8">
			<el-form-item>
				<el-input v-model="allvalue2" size="mini" class="dateinp dateend" placeholder="请选择结束时间"></el-input>
				<el-time-picker  :clearable=false value-format="HH:mm:ss" ref="endtime" @change="ch_endtime" v-model="value3" 
					class="dateinps dateend" size="mini">
				</el-time-picker>
				<el-date-picker :clearable=false @change="enddata" :disabled="unlimited" v-model="value4" type="date" class="dateinps dateend fixtime" value-format="yyyy-MM-dd" size="mini">
				</el-date-picker>

			</el-form-item>
		</el-col>
		<div class="sscheckbox">
			<el-checkbox @change="isunlimited" v-model="unlimited">不限</el-checkbox>
		</div>

	</div>
</template>

<script>
export default {
  props: {
    json: {
      type: Object
    },
    errormsg: {
      type: Object
    }
  },
  data() {
    return {
      value1: "",
      value2: "00:00:00",
      value3: "23:59:59",
      value4: "",
      unlimited: true
    };
  },

  mounted() {
    var that = this;
    //expiryDate effectiveDate
    setTimeout(function() {
      console.log(55555555555);
      console.log(that.json);
      if (that.json.effectiveDate) {
        that.value1 = that.json.effectiveDate.split(" ")[0];
        that.value2 = that.json.effectiveDate.split(" ")[1];
      }
      if (that.json.expiryDate) {
        that.value4 = that.json.expiryDate.split(" ")[0];
        that.value3 = that.json.expiryDate.split(" ")[1];
        that.unlimited = false;
      }
    }, 500);
  },
  methods: {
    isunlimited(val) {
       this.$emit("inf", val);
      if (val) {
        this.json.expiryDate = "";
        this.value4 = "";
        this.value3 = "";
      }
    },
    startdata(val) {
      console.log(val);
      this.$refs.starttime.focus();
    },
    ch_starttime(val) {},
    enddata(val) {
      this.$refs.endtime.focus();
    },
    ch_endtime(val) {
      console.log(val);
    }
  },
  computed: {
    allvalue1() {
      if (this.value1 != "") {
        this.json.effectiveDate = this.value1 + " " + this.value2;
        return this.value1 + " " + this.value2;
      }
    },
    allvalue2() {
      if (this.value4 != "") {
        this.json.expiryDate = this.value4 + " " + this.value3;
        return this.value4 + " " + this.value3;
      }
    }
  },
  watch: {
    "json.effectiveDate": {
      handler: function() {
        if (this.json.effectiveDate != "") {
          console.log(2222);
          console.log(this.json.effectiveDate);
          this.value1 = this.json.effectiveDate.split(" ")[0];
          this.value2 = this.json.effectiveDate.split(" ")[1];
        } else {
          this.value1 = "";
          this.value2 = "00:00:00";
        }
      },
      deep: true
    },
    "json.expiryDate": {
      handler: function() {
        console.log(111);
        if (this.json.expiryDate) {
          this.value4 = this.json.expiryDate.split(" ")[0];
          this.value3 = this.json.expiryDate.split(" ")[1];
          this.unlimited = false;
        } else {
          this.value4 = "";
          this.value3 = "23:59:59";
          this.unlimited = true;
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.informationaa {
  margin: 0 auto 28px;
}
.informations {
  margin-bottom: 0;
  position: relative;
}
.dateinp {
  width: 171px;
  height:100%;
}
.dateinps {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 171px;
  height:100%;
}
.line {
  text-align: center;
}
.sscheckbox {
  position: absolute;
  right: -75px;
  top: 0;
  height: 100%;
  width: 80px;
}
.fixtime{
	z-index:66;
}
</style>